<div class="default-background">
    <div style="display: flex; justify-content: space-between; margin-top: 16px;">
        <div style="flex: 1">
            <div style="font-size: 32px; margin: 8px 0px 16px 0px; font-weight: 700; line-height: 32px;">
                <!-- below is to align text -->
                <span style="margin-left: -4px;">{{'CLIENT_DASHBOARD'|translate}}</span>
            </div>
            <div style="margin: 0px 0px 16px 0px; color: #545968; font-size: 14px;">{{'CREATE_CLIENT_SUB'|translate}}
            </div>
        </div>
        <button mat-raised-button color="primary" (click)="createNewClient()" style="height: 36px;"
            *ngIf="permissionHelper.extractResult(permissionHelper.canDo(projectId, httpSvc.currentUserAuthInfo.permissionIds,'CLIENT_MGMT')) |async">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <mat-icon>add</mat-icon>
                <div>{{'ADD_CLIENT'|translate}}</div>
            </div>
        </button>
    </div>
    <div class="table-container"
        *ngIf="permissionHelper.extractResult(permissionHelper.canDo(projectId, httpSvc.currentUserAuthInfo.permissionIds,'CLIENT_MGMT')) |async"
        style="margin-top: 16px;">
        <table mat-table [dataSource]="tableSource.dataSource">
            <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef> {{tableSource.columnConfig['name']|translate}} </th>
                <td mat-cell *matCellDef="let row" class="mobile-view-name">
                    {{row.name}}
                </td>
            </ng-container>
            <ng-container matColumnDef="type">
                <th mat-header-cell *matHeaderCellDef> {{tableSource.columnConfig['type']|translate}} </th>
                <td mat-cell *matCellDef="let row">
                    <mat-chip-list aria-label="chip list selection">
                        <mat-chip>
                            {{row.type|translate}}
                        </mat-chip>
                    </mat-chip-list>
                </td>
            </ng-container>
            <ng-container matColumnDef="edit">
                <th mat-header-cell *matHeaderCellDef class="table-icon">{{tableSource.columnConfig['edit']|translate}}</th>
                <td mat-cell *matCellDef="let row" class="table-icon">
                    <mat-icon (click)="editClient(row.id)" [color]="'primary'">edit</mat-icon>
                </td>
            </ng-container>
            <ng-container matColumnDef="delete">
                <th mat-header-cell *matHeaderCellDef class="table-icon">{{tableSource.columnConfig['delete']|translate}}</th>
                <td mat-cell *matCellDef="let row" class="table-icon">
                    <mat-icon (click)="doDeleteById(row.id)" [color]="'warn'">delete_outline</mat-icon>
                </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="tableSource.displayedColumns(); sticky: true"></tr>
            <tr mat-row *matRowDef="let row; columns: tableSource.displayedColumns();"></tr>
        </table>
    </div>
    <mat-paginator [showFirstLastButtons]="true" [length]="tableSource.totoalItemCount" [pageIndex]="tableSource.pageNum"
        [pageSize]="tableSource.pageSize" (page)="tableSource.loadPage($event.pageIndex)">
    </mat-paginator>
</div>